@mixin flex {
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

@mixin  transition($second:0s) {
    transition: $second;
    -ms-transition: $second;
    -webkit-transition: $second;
}
@mixin transform-rotateZ($deg:0deg) {
    transform: rotateZ($deg);
    -ms-transform: rotateZ($deg);
    -webkit-transform: rotateZ($deg);
}
$cmnColor:#ff5c00;
$txtColor:#ff6700;
$linkColor:#838383;
$shadow:0 0px 20px 0 rgba(202, 198, 198,0.5);//盒子阴影
body::-webkit-scrollbar{
    width:0;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
html{
    font-size: calc(100vw/1532);
}
header{
    background-color: rgb(51,51,51);
    display: flex;
    justify-content: center;
    position: relative;
    .QRdownload-app{
        width: 124rem;
        height: 148rem;
        background-color: white;
        position: absolute;
        top: 40rem;
        right: 694rem;
        box-shadow: 0 5px 5px 0 rgba(202, 198, 198,0.5);;
        z-index: 999;
        padding: 20rem 15rem;
        box-sizing: border-box;
        display: none;
        .corner{
            width: 10px;
            height: 10px;
            background-color: white;
            @include transform-rotateZ(45deg);
            position: absolute;
            right: 57px;
            top: -5px;
        }
        .QR-img{
            img{
                width: 100%;
                height: 70%;
            }
            div{
                width: 100%;
                height: 30%;
                @include flex;
                justify-content: center;
                align-items: center;
                font-size: 14rem;
            }
        }
    }
}
header>div{
    width: 1226px;
    height: 40rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
header a{
    color: #b0b0b0;
    font-size: 12rem;
}
header a:hover{
    color: #fff;
}
.shoppingCart{
    margin-left: auto;
    height: 100%;
    line-height: 40rem;
    background-color: rgb(66,66,66);
    padding: 0 15rem;
    position: relative;
    &:hover{
        background-color: white;
        color: $cmnColor;
    }
    .shoppingAnim{
        display: none;
        width: 316rem;
        padding: 20rem 15rem;
        background-color: white;
        position: absolute;
        right: 0;
        top: 40rem;
        z-index: 999;
        box-shadow: 0 5px 5px 0 rgba(136, 136, 136, 0.5);
        &>span{
            display: inline-block;
            height: 40rem;            
            width: 100%;
            padding: 10rem 0;
            text-align: center;
            line-height: 40rem;
            color: $linkColor;
        }
        .sa_caption{
            color: gray;
        }
    }

}
header .division{
    margin: 0 7rem;
    color: #424242;
}

header .sl{
    margin-right: 100rem;
}
@media all and (max-width:1081px) {
    header .sl{
        margin-right: 8rem;
    }
}
nav{
    height: 100rem;
    padding: 0 150rem;
    display: flex;
    justify-content: center;
}
nav>div{
    width: 1226px;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
nav>div>a:first-child{
    height: 56rem;
    width: 56rem;
    background-color: slateblue;
    background: url(../imgs/logo-mi2.png) no-repeat;
    background-size: 100% 100%;
    margin-right: 133rem;
}
nav a{
    color: #333;
    font-size: 16rem;
}
nav .nav_drawDown{
    width: 90%;
    display: flex;
    align-items: center;
    &>div{
        box-sizing: border-box;
        padding: 40rem 0;
    }
}
nav .nav_drawDown>div>a{
    padding: 40rem 10rem;
}
nav .nav_drawDown>div>a:hover{
    color: #ff6700;
}
.search{
    margin-left: auto;
    width: 300rem;
    height: 50rem;
    box-sizing: border-box;
}
.search input{
    width: 80%;
    height: 100%;
    float: left;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    padding: 10px;
}
.search button{
    width: 20%;
    height: 100%;
    box-sizing: border-box;
    float: left;
    border: 1px solid #e0e0e0;
    border-left: 0;
    background: none;
    color: #616161;
    font-size: 22rem;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}
.nav_drawDown input{
    outline: none;
}
.nav_drawDown input:focus{
    border:1px solid #FF6700
}
.nav_drawDown input:focus+button{
    border:1px solid #FF6700;
    border-left: none;
}
// .nav_drawDown form .commodity_list{
//     clear: both;
//     width: 80%;
//     box-sizing: border-box;
//     border:1px solid #FF6700;
//     border-top:none;
//     display: none;
//     background: white;
//     z-index: 99999;
// }
// .nav_drawDown form .commodity_list>li{
//     width: 100%;
//     padding: 8rem 10rem;
//     box-sizing: border-box;
// }
// .nav_drawDown input:focus~.commodity_list{
//     display: block;
// }
// .commodity_list>li:hover{
//     background-color: #fafafa;
//     cursor: pointer;
// }
.add_list{
    display: none;
    width: 100vw;
    height: 200rem;
    position: absolute;
    z-index: 555;
    top: 100rem;
    left: -155rem;
    border-top:1px solid #e0e0e0;
    // @include transition(.3s);
    background: white;
    box-shadow: 0 5px 5px 0 rgba(136, 136, 136, 0.5);
    line-height: 200rem;
    span{
        display: inline-block;
        width: 100%;
        text-align: center;
        font-size: 24px;
        color: #ff6700;
        opacity: 0.4;
    }
}
// .nav_drawDown .add:hover~.add_list{
//     height: 200rem;
//     border-top:1px solid #e0e0e0;
//     box-shadow: $shadow;
// }
.search>button:hover{
    background: #FF6700;
    color: white;
}
footer{
    width: 1226rem;
    margin: 0 auto;
}
footer .footerServer{
    padding: 27rem 0;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
}
footer .footerServer ul{
    width: 100%;
    display: flex;
}
footer .footerServer ul li{
    text-align: center;
    width: 19.8%;
    font-size: 16rem;
    border-left: 1px solid #e0e0e0;
}
footer .footerServer ul li span{
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}
footer .footerServer ul li:hover span{
    color: #FF6700;
    cursor: pointer;
}
footer .footerServer ul li:first-of-type{
    border: none;
}
footer .footerServer ul li>span:first-of-type{
    margin-right: 5rem;
    font-size: 24rem;
    vertical-align: middle;
}
footer .sortServer{
    padding: 40rem 0;
    display: flex;
}
footer .sortServer .sortServerLeft{
    width: 80%;
    display: flex;
    justify-content: space-between;
}
footer .sortServer .sortServerLeft dl{
    width: 160rem;
}
footer .sortServer .sortServerLeft dt{
    margin: -1rem 0 26rem;
    font-size: 14px;
    line-height: 1.25;
    color: #424242;
}    
footer .sortServer .sortServerLeft dd{
    margin: 10px 0 0;
    font-size: 12px;
    color: #757575;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}
footer .sortServer .sortServerLeft dd:hover{
    color: #FF6700;
    cursor: pointer;
}
footer .sortServer .sortServerRight{
    width: 251rem;
    float: right;
    height: 110rem;
    border-left: 1px solid #e0e0e0;
    @include flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p:first-child{
        font-size: 22px;
        color: #ff6700;
    }
    div{
        margin: 5rem 0;
    }
    .service{
        width: 120rem;
        height: 30rem;
        border: 1px solid $cmnColor;
        @include flex;
        justify-content: center;        
        align-items: center;
        color: $cmnColor;
        @include transition(.3s);
        &:hover{ 
            cursor: pointer;
            color: white;
            background-color: $cmnColor;
        }
    }
    a{
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 6px;
        margin-top: -3px;
    }
    .wb{
        background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wb.png) 50% 0 no-repeat;
        background-size: cover;
    }
    .wx{
        background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx.png) 50% 0 no-repeat;
        background-size: cover;
    }
}
.company-information{
    width: 100%;
    padding: 30rem 0;
    background-color: rgb(250,250,250);
    @include flex;
    justify-content: center;
    .ci-container{
        width: 1226rem;
        display: flex;
        flex-wrap: wrap;
        .ci-logo{
            width: 5%;
            height: 180rem;
            .bg{
                width: 56px;
                height: 56px;
                margin-right: 10px;
                background: url(https://s02.mifile.cn/assets/static/image/logo-mi2.png) no-repeat;
                background-size: 56px;
            }
        }
        .ci-information{
            width: 95%;
            p{
                line-height: 18px;
            }
            .sites>a{
                color: #757575;
                @include transition(.3s);
                &:hover{
                    color: $cmnColor;
                }
            }
            .others-sites{
                color: #b0b0b0;
                a{
                    @include transition(.3s);
                    color: #b0b0b0;
                    &:hover{
                        color: $cmnColor;
                    }
                }
            }
            .info-links {
                margin-top: 5rem;
                a{
                    display: inline-block;
                    height: 28rem;
                    width: 83rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .img1{
                display: none;
            }
        }
        .tag{
            width: 100%;
            height: 20px;
            background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/slogan2020.png) no-repeat center 0;
        }
    }
}



aside{
    height: 561rem;
    width: 84rem;
    position: fixed;
    bottom: 70px;
    right: 0;
    z-index: 1009;
    justify-content: center;
    li{
        width: 100%;
        height: 92rem;
        background-color: white;
        text-align: center;
        padding-top: 15px;
        box-sizing: border-box;
        border: 1px solid #f5f5f5;
        div{
            font-size: 28px;
            font-weight: 400;
            color: #757575;
            @include transition(.3s);
        }
        span{
            @include transition(.3s);
            font-weight: 400;
            margin-top: 10px;
            font-size: 14px;
            color: #757575;
        }
        &:hover div,&:hover span{
            
            color: $cmnColor;
        }
        &:hover{
            cursor: pointer;
        }
    }
    .call-top{
        display: none;
        margin-top: 14px;
    }
    .aside-QRdownload-app{
        display: none;
        padding: 14px;
        background-color: white;
        box-shadow: $shadow;
        position: absolute;
        right: 98px;
        top: 0px;
        .QR-img{
            img{
                display: block;
                width: 100px;
                height: 100px;
                margin: 6px auto;
            }
            div{
                text-align: center;
                p{
                    font-size: 16px;
                    color: #757575;
                }
            }
        }
        .corner{
            width: 10px;
            height: 10px;
            background-color: white;
            @include transform-rotateZ(45deg);
            position: absolute;
            right: -5px;
            top: 42px;
        }
    }
}